import { ElOption, ElOptionGroup } from 'element-plus'
import { getSlot } from '@/utils/tsxHelper'
import { Slots } from 'vue'

export const useRenderSelect = (slots: Slots) => {
  // 渲染 select options
  const renderSelectOptions = (item) => {
    // 如果有别名，就取别名
    const labelAlias = item?.componentProps?.optionsAlias?.labelField
    return item?.componentProps?.options?.map((option) => {
      if (option?.options?.length) {
        return (
          <ElOptionGroup label={option[labelAlias || 'label']}>
            {() => {
              return option?.options?.map((v) => {
                return renderSelectOptionItem(item, v)
              })
            }}
          </ElOptionGroup>
        )
      } else {
        return renderSelectOptionItem(item, option)
      }
    })
  }

  // 渲染 select option item
  const renderSelectOptionItem = (item, option) => {
    // 如果有别名，就取别名
    // const labelAlias = item?.componentProps?.optionsAlias?.labelField
    // const valueAlias = item?.componentProps?.optionsAlias?.valueField
    // return (
    //   <ElOption label={option[labelAlias || 'label']} value={option[valueAlias || 'value']}>
    //     {{
    //       default: () =>
    //         // option 插槽名规则，{field}-option
    //         item?.componentProps?.optionsSlot
    //           ? getSlot(slots, `${item.field}-option`, { item: option })
    //           : undefined
    //     }}
    //   </ElOption>
    // )
  }

  return {
    renderSelectOptions
  }
}
